<template>
  <div>
    <quill-editor
        v-model="content"
        :options="editorOptions"
        
        ref="QuillEditor" @change="this.$emit('change',this.content)">
    </quill-editor>

    <el-upload :action="'/'" :http-request="handleUpload" style="display:none" ref="UPLOADER" auto-upload></el-upload>
  </div>
</template>

<script>
import cos from '../cos'

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction
  
    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
  
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image'],
    ['clean']                                         // remove formatting button
  ]
export default {
  name : "GoodsDetailsEditor",
  props : ["initContent"],
  mounted(){
    this.content = this.initContent
  },
  methods : {
    handleUpload(file){
      console.log(file)
      this.$refs.UPLOADER.clearFiles();
    }
  },
  data(){
    return {
      content:"",
      editorOptions : {
        placeholder: "输入商品描述",
        modules:{
          toolbar:{
            container: toolbarOptions,
            handler:{
              'image': function(value){
                console.log(value)
                if(value){
                  
                }else{
                  this.quill.format('image',false)
                }
              }
            }
          }
        }
      }

    }
  }
}
</script>

<style>

</style>
